<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">

	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
	.fy {
		background: #bfa;
		display: flex;
		float: left;
		position: fixed;
		width: 100%;
		height: 100%
	}

	#app {
		margin: auto
	}

	.el-input {
		width: 300px;
		height: 75px;
		margin: auto
	}
</style>

<body>
	<div class="fy">
		<div id="app">
			<el-form>
				<el-form-item label="密码" prop="pass" :rules="rules">
					<el-input type="password" v-model="pass" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="checkPass">
					<el-input type="password" v-model="checkPass" autocomplete="off"></el-input>
				</el-form-item>

				<el-button @click="check(pass,checkPass)">Button</el-button>

				<el-dialog :visible.sync="visible" title="Hello world">

					<p>Try Element</p>
				</el-dialog>
			</el-form>
		</div>
	</div>
</body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
	new Vue({
		el: '#app',
		data: function () {
			return {
				visible: false,
				pass: undefined,
				checkPass: undefined,
				rules: {
					pass: [
						{ validator: check, trigger: 'blur' }
					]
				}
			}
			var check = (pass, checkPass)=>{
				if (pass === "") {
					return callback(new Error('不能为空'));
				} else if (checkPass === "") {
					console.log("请输入确认")
				} else if (pass !== checkPass) {
					console.log("密码不一致")
				}
				if (pass === checkPass) {
					return pass
				}
			}

		},
		methods: {
			check(pass, checkPass) {
				if (pass === "") {
					return callback(new Error('不能为空'));
				} else if (checkPass === "") {
					console.log("请输入确认")
				} else if (pass !== checkPass) {
					console.log("密码不一致")
				}
				if (pass === checkPass) {
					return pass
				}
			}
		}
	});
</script>

</html>